<!DOCTYPE html>
<html>
	<head>
		<title>selectInput</title>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
		<link rel="stylesheet" type="text/css" href="./lib/layui/css/layui.css" />
	</head>
	<body>
		<div class="layui-form layui-container" style="padding: 20px">

			<div class="layui-form-item">
				<div class="layui-input-block" id="test1"></div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="addSelect">动态添加选项</button>
					<button type="button" class="layui-btn" id="getValue">获取Value值</button>
					<button type="button" class="layui-btn" id="emptyValue">清空Value值</button>
				</div>
			</div>
		</div>

	</body>
	<script src="./lib/layui/layui.all.js"></script>
	<script>
		layui.config({
			base: './lib/modules/'
		}).extend({
			selectInput: 'selectInput/selectInput'
		}).use(['form', 'selectInput'], function() {
			var $ = layui.$,
				form = layui.form,
				selectInput = layui.selectInput;
			var ins = selectInput.render({
				// 容器id，必传参数
				elem: '#test1',
				name: 'test', // 渲染的input的name值
				hasSelectIcon: true,
				initValue: 'iPhone12 Pro Max', // 渲染初始化默认值
				placeholder: '请输入名称', // 渲染的inputplaceholder值
				// 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
				data: [{
						value: 'aa bb',
						name: 1111
					},
					{
						value: 2333,
						name: 2222
					},
					{
						value: 2333,
						name: 2333
					},
					{
						value: 2333,
						name: 2333
					},
				],
				invisibleMode: true,
				url: "https://www.layui.com/", // 异步加载的url，异步加载联想词的数组值，设置url，data参数赋的值将会无效，url和data参数两者不要同时设置
				remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
				parseData: function(data) { // 此参数仅在异步加载data数据下或者远程搜索模式下有效，解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据

				},
				error: function(error) { // 异步加载出错的回调 回调参数是错误msg

				},
				done: function(data) { // 异步加载成功后的回调 回调参数加载返回数据

				},
				remoteMethod: function(value, cb) { // 远程搜索的回调函数
					// value 是input实施输入的value值
					// cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数

					//案例
					//这里如果val为空, 则不触发搜索
					if (!value) {
						return cb([]);
					}
					//这里的$.ajax去请求后台拿回数据
					$.ajax({
						method: 'get',
						url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
						data: {
							keyword: val,
						},
						success: function(data) {
							return cb(data)
						}
					})
				}
			});

			// 监听input 实时输入事件
			ins.on('itemInput(test1)', function(obj) {
				console.log(obj);
			});

			// 监听select 选择事件
			ins.on('itemSelect(test1)', function(obj) {
				console.log(obj);
			});

			// 获取选中的value值
			var selectValue = ins.getValue();

			// 清空输入框的value值
			ins.emptyValue();


			$("#addSelect").click(function() {
				ins.addSelect([{
						value: 'aa bb',
						name: 1111
					},
					{
						value: 2333,
						name: 2222
					},
					{
						value: 2333,
						name: 2333
					},
					{
						value: 2333,
						name: 2333
					},
					{
						value: 6666,
						name: 9999
					},
					{
						value: 8888,
						name: 101010
					},
				])
			});

			$("#emptyValue").click(function() {
				ins.emptyValue();
			})

			$("#getValue").click(function() {
				var value = ins.getValue();
				if (value) {
					if (typeof(value) === 'object') {
						layer.msg(JSON.stringify(value));
					} else {
						layer.msg(value);
					}
				} else {
					layer.msg('请先选择');
				}
			})
			// 如果使用本地数据加载，不要使用设置远程 url参数 也不要将remoteSearch参数设置为 true，完整的本地赋值数据案例
			// var ins2 = selectInput.render({
			//     elem: '#test1',
			//     data: [
			//         {value: 1111, name: 1111},
			//         {value: 2333, name: 2222},
			//         {value: 2333, name: 2333},
			//         {value: 2333, name: 2333},
			//     ],
			//     placeholder: '请输入名称',
			//     name: 'list_common',
			//     remoteSearch: false
			// });
		});
	</script>
</html>
